<template>
	<view class="wrap">
		<view class="export-card">
			<u-section title="导出报表" sub-title="" line-color="#4f77ed">
				<view class="pick-card" slot="right">
					<picker @change="pickerChange" :value="index" :range="months">
						<view class="uni-input">{{months[index]}}月考勤汇总</view>
					</picker>
					<u-icon class="pick-icon" name="arrow-right" size="24"></u-icon>
				</view>
			</u-section>
		</view>	
		
		<view class="statistics-card">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="changeTab"></u-tabs>
			
			<u-read-more show-height="330" :toggle="true" text-indent="0" close-text="展开">
				<uni-calendar class="uni-calendar--hook" :selected="selected" :showMonth="false" @change="changeCalendar" @monthSwitch="monthSwitch" />
			</u-read-more>
			
			<view class="progress-container">
				<u-circle-progress type="success" :percent="80" duration="2000" width="290" border-width="16">
					<view class="u-progress-content">
						<text class='u-progress-info-up'>24/30</text>
						<text class='u-progress-info-down'>应到人数/实到人数</text>
					</view>	
				</u-circle-progress>
			</view>
			
			<view class="statistics-container">
				<u-grid class="grid" :col="3" :border="false">
					<u-grid-item class="grid-item">
						<view class="grid-info-up">6</view>
						<view class="grid-info-down">未打卡</view>
					</u-grid-item>
					<u-grid-item class="grid-item">
						<view class="grid-info-up">0</view>
						<view class="grid-info-down">迟到</view>
					</u-grid-item>
					<u-grid-item class="grid-item">
						<view class="grid-info-up">0</view>
						<view class="grid-info-down">外勤</view>
					</u-grid-item>
				</u-grid>
				<view class="statistics-time">统计于2024-7-28 12:20</view>
			</view>
		</view>
	</view>
</template>

<script>
import HeadNavBar from '@/components/headnavbar/index.vue';

export default {
	components: {
		HeadNavBar
	},
	data() {
		return {
			index: 0,
			months: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],
			indicatorStyle: `height: 50px;`,
			selected: [],
			list: [
				{
					name: '日统计'
				}, 
				{
					name: '周统计',
				}, 
				{
					name: '月统计',
				},
			],
			current: 0,
			percent: 50,
		}
	},
	methods: {
		pickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.detail.value);
			this.index = e.detail.value;
		},
		changeTab(index) {
			this.current = index;
		},
		changeCalendar(e) {
			console.log('change 返回:', e)
			// 模拟动态打卡
			if (this.info.selected.length > 5) return
			this.info.selected.push({
				date: e.fulldate,
				info: '打卡'
			})
		},
		monthSwitch(e) {
			console.log('monthSwitchs 返回:', e)
		}
	}
}	
</script>

<style lang="scss">
@import 'index.scss';
page {
	background-color: #f5f5f5;
}

.export-card {
	margin: 40rpx;
	padding: 40rpx;
	border-radius: 10rpx;
	background-color: #fff;
}

.picker-view {
	width: 750rpx;
	height: 600rpx;
	margin-top: 20rpx;
}

.item {
	line-height: 100rpx;
	text-align: center;
}

.pick-card {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.pick-icon {
	margin-left: 6rpx;
}

.statistics-card {
	// margin: 40rpx;
	// padding: 40rpx;
	border-radius: 10rpx;
	background-color: #fff;
}

.progress-container {
	display: flex;
	justify-content: center;
	margin: 30rpx;
}

.u-progress-content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.u-progress-info-up {
	font-size: 40rpx;
	font-weight: 600;
	padding-left: 16rpx;
	letter-spacing: 2rpx
}

.u-progress-info-down {
	color: #999999;
}

.statistics-container {
	margin: 30rpx;
}

.grid-info-up {
	font-size: 40rpx;
	font-weight: 600;
}

.grid-info-down {
	color: #999999;
}

.statistics-time {
	color: #999999;
	padding-top: 30rpx;
	padding-bottom: 30rpx;
}
</style>